<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <base href="http://hefengxian.github.io/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标题</title>

    <link rel="shortcut icon" href="assets/site/images/favicon.ico"/>

    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/site/css/site.css">

    <script src="assets/libs/art-template/template.js"></script>
    <script src="http://cdn.bootcss.com/require.js/2.1.20/require.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="assets/libs/require-js/main-cdn.js"></script>
    <script src="assets/site/js/site.js"></script>

    <script>
        var current_page = 'tool';
        var aa = {
            setSearchMoreParams: function (lestr) {
            },
            updateCall: function (response) {
                if ($.trim(response) == '') {
                    $('#suggest').css('display', 'none');
                } else {
                    $('#suggest').css('display', 'block');
                    $('#suggest').html(unescape(response));
                }
            }
        };

        window.keydownCounter = 0;
        window.keywordValue = '';

        $(document).ready(function () {
            var baidu = $("#baidu"),
                    google = $("#google"),
                    bing = $("#bing"),
                    youdao = $("#youdao"),
                    searchForm = $("#searchForm"),
                    keyword = $("input[name='wd']");

            baidu.click(function () {
                changeSearchUrl("baidu");
            });
            google.click(function () {
                changeSearchUrl("google");
            });
            bing.click(function () {
                changeSearchUrl("bing");
            });
            youdao.click(function () {
                changeSearchUrl("youdao");
            });

            function changeSearchUrl(enginType) {
                var url = "http://www.baidu.com/s",
                        searchName = "wd";

                switch (enginType) {
                    case "baidu":
                        url = "http://www.baidu.com/s";
                        searchName = "wd";
                        break;
                    case "google":
                        url = "https://www.google.com.hk/search";
                        searchName = "q";
                        break;
                    case "bing":
                        url = "http://cn.bing.com/search";
                        searchName = "q";
                        break;
                    case "youdao":
                        url = "http://dict.youdao.com/search?keyfrom=dict.index";
                        searchName = "q";
                        break;
                }

                searchForm.attr("action", url);
                keyword.attr("name", searchName);
            }

            // 阻止空的表单提交
            searchForm.submit(function () {
                if ($.trim(keyword.val()) == "") {
                    return false;
                }
            });

            $('#suggest').on("onSelect", function (e) {
                console.log(e);
            });


            var baseSuggestUrl = "http://dsuggest.ydstatic.com/suggest/suggest.s?o=aa&uid=-973021570@219.133.107.166&keyfrom=dict.suggest&r=15422742&h=0";

            keyword.on('keyup', function (e) {
                if ($.trim($(this).val()) != '' && $(this).val() != window.keywordValue && e.keyCode != 40 && e.keyCode != 38) {
                    loadScript(baseSuggestUrl + "&query=" + $(this).val());
                } else if ($.trim($(this).val()) == '') {
                    $('#suggest').css('display', 'none');
                }
                window.keywordValue = $(this).val();
            });

            function loadScript(src) {
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = src;
                document.body.appendChild(script);
            }

            window.onkeyup = function (e) {
                var tr = $('#suggest:visible table tr td table:first-child tr');
                if (e.keyCode == 40) {
                    window.keydownCounter++;
                    if (window.keydownCounter > tr.length) {
                        window.keydownCounter = 1;
                    }
                    if (tr.length > 0) {
                        $('#suggest:visible table tr td table:first-child tr td.suggest-selected').removeClass('suggest-selected');
                        $(tr[window.keydownCounter - 1]).find('td:first-child').addClass('suggest-selected');
                        keyword.val($(tr[window.keydownCounter - 1]).find('td:first-child').text());
                    }
                }
                if (e.keyCode == 38) {
                    window.keydownCounter--;
                    if (window.keydownCounter <= 0) {
                        window.keydownCounter = tr.length;
                    }
                    if (tr.length > 0) {
                        $('#suggest:visible table tr td table:first-child tr td.suggest-selected').removeClass('suggest-selected');
                        $(tr[window.keydownCounter - 1]).find('td:first-child').addClass('suggest-selected');
                        keyword.val($(tr[window.keydownCounter - 1]).find('td:first-child').text());
                    }
                }
            }
        });
    </script>

    <style>
        .suggest-selected {
            background-color: rgba(34, 36, 38, 0.227451);
        }

        .suggest {
            display: none;
            margin-top: 4px;
            border: 1px solid rgba(34, 36, 38, 0.227451);
            border-radius: 4px;
            padding: 4px;
        }

        .suggest table {
            background-color: #fff !important;
        }

        .suggest table tr td table {
            border: 0 !important;
            border-radius: 4px !important;
            background-color: #FFF !important;
        }

        .suggest table tr td table:first-child tr td {
            cursor: pointer;
            padding: 5px 8px;
        }

        .suggest table tr td table:first-child tr td:hover {
            background-color: rgba(34, 36, 38, 0.227451);
        }

        .suggest table tr td table:last-child {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="_navbar"></div>


    <div id="_content">
        <div style="height: 150px"></div>
        <div class="">
            <form id="searchForm" action="" target="_blank">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="input-group">
                            <input id="kw" type="text" class="form-control" name="wd" autocomplete="off" disableautocomplete placeholder="Search..." autofocus="true">
                            <span class="input-group-btn">
                                <button id="baidu" type="submit" class="btn btn-default"><i class="fa fa-paw"></i></button>
                                <button id="google" type="submit" class="btn btn-primary"><i class="fa fa-google"></i></button>
                                <button id="bing" type="submit" class="btn btn-warning">Bing</button>
                                <button id="youdao" type="submit" class="btn btn-danger"><i>Youdao</i></button>
                            </span>
                        </div>
                        <div class="menu">
                            <div class="suggest" id="suggest"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div id="_footer"></div>
</div>


</body>
</html>